<template>
    <div class="form-block-inner">
        <Form ref="formItem" :model="formItem" label-position="right">
            <div class="title-style">基本信息</div>
            <Card class="card">
                <Row :gutter="16">
                    <!--<Col span="6">
                        <FormItem prop="shi_quan_type" label="设定事权类型:">
                            {{formItem.shi_quan_type}}
                        </FormItem>
                    </Col>-->
                    <Col span="24">
                        <FormItem prop="title" label="填报事项名称:">
                            {{title}}
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop="xing_quan_code" label="行权事项编码:">
                            {{formItem.xing_quan_code}}
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop="duty_matter" label="设定事项责任:">
                            {{formItem.duty_matter}}
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop="shi_xiang_remark" label="填写事项说明：">
                            {{formItem.shi_xiang_remark}}
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem prop="jue_ding_gov" label="决定机构:">
                            {{formItem.jue_ding_gov}}
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem prop="jue_ding_gov_xing_zhi" label="决定机构性质:">
                            <span v-if="formItem.jue_ding_gov_xing_zhi == 1">法定机关</span>
                            <span v-if="formItem.jue_ding_gov_xing_zhi == 2">授权组织</span>
                            <span v-if="formItem.jue_ding_gov_xing_zhi == 3">受委托组织</span>
                            <span v-if="formItem.jue_ding_gov_xing_zhi == 4">其它</span>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem prop="shou_li_gov" label="受理机构:">
                            {{formItem.shou_li_gov}}
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem prop="shou_li_gov_xing_zhi" label="受理机构性质:">
                            <span v-if="formItem.shou_li_gov_xing_zhi == 1">法定机关</span>
                            <span v-if="formItem.shou_li_gov_xing_zhi == 2">授权组织</span>
                            <span v-if="formItem.shou_li_gov_xing_zhi == 3">受委托组织</span>
                            <span v-if="formItem.shou_li_gov_xing_zhi == 4">其它</span>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop="san_ding_yi_ju" label="三定方案依据：">
                            {{formItem.san_ding_yi_ju}}
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem prop="san_ding_yi_ju_url" label="依据材料：">
                            <Button class="show-btn" size="small" @click="uploadImgAction('san_ding')">查看材料</Button>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop="fa_lv_fa_gui_yi_ju" label="法律法规依据：">
                            {{formItem.fa_lv_fa_gui_yi_ju}}
                        </FormItem>
                    </Col>

                    <Col span="6">
                        <FormItem prop="fa_lv_fa_gui_yi_ju_url" label="依据材料：">
                            <Button class="show-btn" size="small" @click="uploadImgAction('fa_lv_fa_gui')">查看材料</Button>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop="wen_jian_yi_ju" label="国家、省、市相关文件依据：">
                            {{formItem.wen_jian_yi_ju}}
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem prop="wen_jian_yi_ju_url" label="依据材料：">
                            <Button class="show-btn" size="small" @click="uploadImgAction('wen_jian')">查看材料</Button>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop="ban_jian_xing_shi" label="办理形式:">
                            {{formItem.blxs}}
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem prop="is_shou_fei" label="是否收费:">
                            <span v-if="formItem.is_shou_fei == 1">收费</span>
                            <span v-if="formItem.is_shou_fei == 2">不收费</span>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem prop="ban_jian_type" label="办件类型:">
                            <span v-if="formItem.ban_jian_type == 1">即办件</span>
                            <span v-if="formItem.ban_jian_type == 2">承诺件</span>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem prop="date_type" label="承诺期限类型:">
                            <span v-if="formItem.date_type == 1">自然日</span>
                            <span v-if="formItem.date_type == 2">工作日</span>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem prop="zhou_qi" label="承诺期限（天）:">
                            {{formItem.zhou_qi}}
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem prop="fu_wu_dui_xiang" label="服务对象:">
                            {{formItem.fwdx}}
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem prop="ban_li_address" label="办理地点:">
                            {{formItem.ban_li_address}}
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem prop="work_run_time" label="工作时间:">
                            {{formItem.work_run_time}}
                        </FormItem>
                    </Col>
                    <Col span="8">
                        <FormItem prop="zi_xun_type" label="咨询方式:">
                            {{formItem.zi_xun_type}}
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem prop="publicity_content" label="公示内容:">
                            {{formItem.publicity_content}}
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem prop="publicity_media" label="公示媒介:">
                            {{formItem.publicity_media}}
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem prop="publicity_scope" label="公示范围:">
                            {{formItem.publicity_scope}}
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem prop="publicity_cycle" label="公示周期：">
                            {{formItem.publicity_cycle}}
                        </FormItem>
                    </Col>
                </Row>
            </Card>
            <Divider/>
        </Form>
        <file-show-modal ref="fileShowModal"></file-show-modal>
    </div>
</template>

<script>
import {
  selectSstGovBaseById
} from '@/api/setting/base-info'
import FileShowModal from './components/file-show-modal'

export default {
  name: 'BaseDetail',
  components: { FileShowModal },
  data () {
    return {
      formItem: {},
      btnLoading: false,
      modalTitle: '',
      modalWidth: 500,
      modalType: '',
      modalData: {},
      baseID: ''
    }
  },
  computed: {
    getUploadUrl () {
      return this.$config.upLoadFileUrl
    },
    title () {
      if (this.formItem.project_name && !this.formItem.subitem) {
        return this.formItem.project_name
      } else if (this.formItem.project_name && this.formItem.subitem) {
        return this.formItem.project_name + ' （ ' + this.formItem.subitem + ' ）'
      } else {
        return ''
      }
    }
  },
  mounted () {
    this.baseID = this.$route.query.id
    this.getInfoByID()
  },
  methods: {
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    getInfoByID () {
      selectSstGovBaseById({ id: this.baseID }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.formItem = data.data
        } else {
          this.error(data)
        }
      })
    },
    uploadImgAction (type) {
      let path = ''
      switch (type) {
        case 'san_ding':
          path = this.formItem.san_ding_yi_ju_url
          break
        case 'fa_lv_fa_gui':
          path = this.formItem.fa_lv_fa_gui_yi_ju_url
          break
        case 'wen_jian':
          path = this.formItem.wen_jian_yi_ju_url
          break
      }
      this.$refs.fileShowModal.modelAction(type, path)
    }
  },
  watch: {
    formItem (val) {
      // 办理形式
      val.blxs = ''
      val.ban_jian_xing_shi = val.ban_jian_xing_shi ? JSON.parse(val.ban_jian_xing_shi) : []
      if (val.ban_jian_xing_shi) {
        val.ban_jian_xing_shi.forEach(item => {
          val.blxs += item + ' '
        })
      }
      // 服务对象
      val.fwdx = ''
      val.fu_wu_dui_xiang = val.fu_wu_dui_xiang ? JSON.parse(val.fu_wu_dui_xiang) : []
      if (val.fu_wu_dui_xiang) {
        val.fu_wu_dui_xiang.forEach(item => {
          val.fwdx += item + ' '
        })
      }
      // 图片为null处理
      val.san_ding_yi_ju_url = val.san_ding_yi_ju_url ? val.san_ding_yi_ju_url : ''
      val.fa_lv_fa_gui_yi_ju_url = val.fa_lv_fa_gui_yi_ju_url ? val.fa_lv_fa_gui_yi_ju_url : ''
      val.wen_jian_yi_ju_url = val.wen_jian_yi_ju_url ? val.wen_jian_yi_ju_url : ''
    }
  }
}
</script>

<style scoped lang="less">
    .tag-box {
        margin-bottom: 10px;
    }

    /deep/ .ivu-col-span-2 {
        margin-top: 23px;
    }

    .button-group {
        text-align: center;
    }

    .upload-icon {
        padding-left: 10px;
    }

    /deep/ .ivu-form-item-label {
        font-weight: bold;
    }

    .card {
        padding: 15px;
    }

    .show-btn {
        /*display: inline-block;*/
    }
</style>
